import React, { Component } from 'react';
import { Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { InputItem, List, Button, WingBlank, WhiteSpace } from 'antd-mobile';
import * as loginActions from 'actions/login';


@connect(state => ({
    
}), dispatch => ({
    loginActions: bindActionCreators(loginActions, dispatch)
}))
export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    handleChange(key, value) {
        this.setState({
            [key]: value
        })
    }
    handleClick() {
        const { name, password } = this.state;
        this.props.loginActions.postLogin({name, password}).then(res => {
            if (res) {
                localStorage.setItem('token', res);
                this.props.history.push('/home');              
            }
        }).catch(e => {
            console.log(e);
        });
        
    }
    render() {
        const { name, password } = this.state;
        return (
            <div>                
                <List>
                    <WingBlank>
                    <InputItem clear value={name} onChange={value => { this.handleChange('name', value); }}>账号</InputItem>
                    <InputItem type='password' value={password} onChange={value => { this.handleChange('password', value); }}>密码</InputItem>                   
                    </WingBlank>                 
                </List> 
                <WingBlank>
                    <WhiteSpace size='lg'/>
                    <Button type='primary' onClick={this.handleClick.bind(this)}>登录</Button>
                    <WhiteSpace size='lg'/>   
                </WingBlank>                                         
            </div>
        )
    }
}